<template>
  <div class="app-container banner_page">
    <div v-if="!showEdit" style="padding: 10px;background: #fff;">
      <el-row style="background: #fff;margin-bottom: 10px;border-bottom: 1px solid #ccc;padding-bottom: 10px;">
        <el-col :span="22">
          <el-input v-model="orderid" placeholder="订单号搜索" clearable style="width: 200px;" />
          <el-input v-model="username" placeholder="用户名搜索" clearable style="width: 200px;" />
          <el-select v-model="orderstatus" placeholder="订单状态" style="width: 120px;">
		<el-option
			v-for="item in statusorder"
			:key="item.value"
			:label="item.label"
			:value="item.value">
		</el-option>
	</el-select>
          <div style="padding-top: 10px;">
            <el-button type="primary" @click="getData(1)">搜索</el-button>
	    <el-button type="primary" @click="downloadOrder(1)">导出订单</el-button>
          </div>

        </el-col>

      </el-row>
      <el-row style="background: #fff;margin-bottom: 10px;">
        <el-col :span="22">
          <el-button style="border-color: #409EFF;color: #409EFF;" @click="cancelOrder">取消</el-button>
          <el-button style="border-color: #409EFF;color: #409EFF;" @click="msgOrder">通知补款</el-button>
	  <!--<el-button style="border-color: #409EFF;color: #409EFF;" @click="downloadOrder">导出订单</el-button>-->
        </el-col>
        <el-col :span="2">
          <div class="total_bar">
            <span>共{{ count }}条</span>
          </div>
        </el-col>

      </el-row>
      <el-table
        ref="multipleTable"
        stripe
        :data="tableData" :row-class-name="tableRowClassName"
        tooltip-effect="dark"
        style="width: 100%;"
        @selection-change="handleSelectionChange"  
      >
        <el-table-column
          type="selection"
          width="50"
          fixed="left"
        />
        <el-table-column
          prop="orderid"
          label="订单号"
          fixed="left"
        />
        <el-table-column
          prop="name"
          label="关联商品"
          fixed="left"
        />
        <el-table-column
          prop="shopname"
          label="所属门店"
        />
        <el-table-column
          prop="username"
          label="关联用户"
          show-overflow-tooltip
        />
        <el-table-column
          prop="type"
          label="订单类型"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            {{
              scope.row.type==1?'现货':
              scope.row.type==2?'预定':'其他'
            }}
          </template>
        </el-table-column>
        <el-table-column
          prop="orderstatus"
          label="订单状态"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            {{
              scope.row.orderstatus == 0 ? '预订,未付定金' :
              scope.row.orderstatus == 1 ? '预订,未定价' :
              scope.row.orderstatus == 2 ? '预订,已定价' :
              scope.row.orderstatus == 3 ? '预订,待付尾款' :
              scope.row.orderstatus == 4 ? '预订,待发货' :
              scope.row.orderstatus == 5 ? '现货,待付款' :
              scope.row.orderstatus == 6 ? '现货,已付款 待发货' :
              scope.row.orderstatus == 7 ? '已发货' :
              scope.row.orderstatus == 8 ? '已完成' :
              scope.row.orderstatus == 9 ? '已取消' : '其他'
            }}
          </template>
        </el-table-column>
        <el-table-column
          prop="yudingmoney"
          label="定金金额"
          show-overflow-tooltip
        />
        <el-table-column
          prop="weikuanmoney"
          label="尾款金额"
          show-overflow-tooltip
        />
        <el-table-column
          prop="youhuimoney"
          label="优惠金额"
          show-overflow-tooltip
        />
        <el-table-column
          prop="dingjiamoney"
          label="商品定价"
          show-overflow-tooltip
        />
        <el-table-column
          prop="yunfeimoney"
          label="运费金额"
          show-overflow-tooltip
        />
        <el-table-column
          prop="allmoney"
          label="订单总金额"
          show-overflow-tooltip
        />
        <el-table-column
          prop="paymoney"
          label="已付款金额"
          show-overflow-tooltip
        />
        <el-table-column
          prop="daifumoney"
          label="待付款"
          show-overflow-tooltip
        />
        <el-table-column
          prop="addtime"
          label="创建时间"
        />
        <el-table-column
          prop="address"
          label="操作"
          fixed="right"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="showEditpage(scope.row)">编辑</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div style="display: flex;align-items: center;justify-content: center;padding: 20px;">
        <el-pagination
          background
          layout="prev, pager, next"
          :page-size="20"
          :page-count="total"
          :total="count"
          @current-change="getData"
        />
      </div>

    </div>
    <div v-else>
      <edit :editdata="addData" class="edit" />
    </div>

  </div>
</template>

<script>
import { orderindex, cancelOrder, msgOrder,downloadOrder } from '@/api/order'
import edit from './edit'
export default {
  components: {
    edit
  },
  data() {
    return {
      showEdit: false,
      statusoptions: [
        { value: 0, label: '全部' },
        { value: 1, label: '审核通过' },
        { value: 2, label: '审核未通过' },
        { value: 3, label: '待审核' },
        { value: 4, label: '已封禁' },
        { value: 5, label: '未审核' }
      ],

      statusorder: [
        { value: 0, label: '全部' },
        { value: 1, label: '预订,未付定金' },
        { value: 2, label: '预订,未定价' },
        { value: 3, label: '预订,已定价' },
        { value: 4, label: '预订待付尾款' },
        { value: 5, label: '预订待发货' },
        { value: 6, label: '现货,待付款' },
        { value: 7, label: '现货,待发货' },
        { value: 8, label: '已发货' },
        { value: 9, label: '已完成' },
        { value: 10, label: '已取消' }
      ],

      tableData: [],
      multipleSelection: [],

      orderid: '',
      username: '',
      orderstatus: '',
      status: '',

      total: 1,
      count: 1
    }
  },
  created() {
    this.getData(1)
  },
  methods: {
    tableRowClassName({row, rowIndex}) {
     //this.$message.error(row.statusorder)
        if (row.orderstatus == 4 || row.orderstatus == 6) {
          return 'warning-row';
        } 
        return '';
    },
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    showEditpage(data) {
      this.showEdit = true
      this.addData = data
    },
    closeEditpage() {
      this.showEdit = false
      this.getData()
    },
    getData(e) {
      console.log(e)
      orderindex({
        orderid: this.orderid,
        username: this.username,
	orderstatus: this.orderstatus,
        // status:this.status,
        page: e
      }).then(res => {
        this.tableData = res.list.list
        this.count = Number(res.list.count)
        this.total = Number(res.list.total)
      })
    },
    cancelOrder() {
      const self = this
      if(this.multipleSelection.length === 0) {
        this.$message.error('请选择订单')
        return
      }
      this.$confirm('此操作将取消该订单, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        const orderid = []
        self.multipleSelection.forEach(row => {
          orderid.push(row.orderid)
        })
        cancelOrder({
          orderid: orderid.toString()
        }).then(response => {
          self.$message({
            message: '操作成功',
            type: 'success'
          })
          this.$refs.multipleTable.clearSelection()
          orderid.forEach(id => {
            // row.orderid==id ? row.orderstatus = status : row.orderstatus;
            // 								self.tableData = self.tableData.filter(function(row){
            // 									return row.id != id;
            // 								});
          })
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    msgOrder() {
      const self = this
      if(this.multipleSelection.length === 0) {
        this.$message.error('请选择订单')
        return
      }
        const orderid = []
        self.multipleSelection.forEach(row => {
            orderid.push(row.orderid)
        })
        msgOrder({
            orderid: orderid.toString()
        }).then(response => {
            self.$message({
            message: '操作成功',
            type: 'success'
            })
            this.$refs.multipleTable.clearSelection()
        })
    },

    downloadOrder(e) {
	const hrefurl = `/order/downloadOrder?orderid=${this.orderid}&username=${this.username}&orderstatus=${this.orderstatus}`
	window.open(hrefurl,'_blank');
	 /*console.log(e)
	 orderid: this.orderid,
		username: this.username,
		orderstatus: this.orderstatus,
        downloadOrder({
		orderid: this.orderid,
		username: this.username,
		orderstatus: this.orderstatus,
        }).then(response => {
            //self.$message({
            //message: '操作成功',
            //type: 'success'
            //})
            //this.$refs.multipleTable.clearSelection()
        })*/
    }
  }
}
</script>

<style lang="less" scoped>
.el-row{
	.el-button{
		min-width: 120px;
	}
}

.banner_page{
	position: relative;
	background: #F5F6FA;
}
.total_bar{
		height: 40px;
		line-height: 40px;
	}
	.tab_img{
		width: 20px;
		height: 20px;
	}

</style>
<style >
.el-table .warning-row {
    //background-color: #E6ABAB !important;
    color:red;
  }
</style>

